<template>
  <div class="property-detail">

    <div class="head">
      <div class="l">
        <div class="goback" @click="goback()">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="title">
          <div class="t">{{DetailData.house_addr || 'Selway Apartments.mock'}}</div>
          <div class="txt" :title="DetailData.house_addr|| 'default address'">
            <i class="el-icon-location-outline"></i>
            {{DetailData.house_addr || '4077 Mclaughlin Ave, Los Angeles, CA 90066'}}
            </div>
        </div>
        <div class="for-sale">{{DetailData.sale_type || 'For sale'}}</div>
      </div>
      <div class="price">
        <p>${{DetailData.total_price || '00000' | numberFormat}}</p>
        <span>{{DetailData.price_sqf || '$6,000'}} / sqft</span>
      </div>
    </div>


    <div class="banner">
      <el-carousel indicator-position="outside" height="600px">
        <el-carousel-item v-for="item in DetailData.images" :key="item.id">
          <!-- <img :src="item.image || '../assets/land2_cloud.png'" :alt="DetailData.filename"> -->
          <img :src="item.image" :alt="DetailData.file_type">
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="content">
      <div class="left">
        <div class="ca-frk">
          <div class="t">CA1/FRK</div>
          <div class="price">{{Rates.ca1 || '10,000'}}</div>
          <p class="chg-vol">
            <span class="c">CHG {{Rates.chg || '+0.03%'}}</span>
            <span class="v">VOL {{Rates.vol || '1,000'}}</span>
          </p>
          <div class="balance">
            <div class="tip">Your balance: {{Rates.balance || '20,010 FRK'}}</div>
            <div class="tr">
              <!-- <div class="l">100,000</div> -->
              <input name="rate" v-model="Rates.frk" type="text">
              <div class="r">FRK</div>
            </div>
            <div class="tr">
              <!-- <div class="l">100,000</div> -->
              <input name="" v-model="Rates.ca1" type="text">
              <div class="r">CA1</div>
            </div>
            <div class="buy">Buy CA1</div>
            <span class="info">Advanced trading</span>
          </div>
        </div>

        <div class="forum">
          <div class="thead">Forum</div>
          <div class="topic">
            <div class="t">Maude Hall</div>
            <div class="cont">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. </div>
            <div class="operate">
              <div class="reply">199</div>
              <div class="share">Share</div>
            </div>
            <div class="r-widget">300</div>
          </div>
          <div class="replies">
            <div class="t">Replies</div>
            <div v-for="item in 4" :key="item" class="reply">
              <div class="rt">Maude Hall</div>
              <div class="cont">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</div>
              <div class="operate">
                <div class="reply-ico">Reply</div>
                <div class="share">Share</div>
                <div class="widget">20</div>
              </div>
            </div>
            <div class="comment-rich-box">
              <textarea name="richbox" cols="33" rows="4" placeholder="Type your comment here"></textarea>
            </div>
          </div>
        </div>
      </div>

      <div class="right">
        <div class="overview">
          <div class="brief">
            <div class="type">{{ DetailData.house_type || 'Single-family'}}</div>
            <div class="areas">{{ DetailData.areas || '1450 sq ft'}}</div>
            <div class="bedroom">{{ DetailData.room1 || 3}}</div>
            <div class="bathroom">{{ DetailData.room2 || 2}}</div>
          </div>
          <div class="cont">
            <div class="t">Overview</div>
            <div class="txt">
              {{DetailData.details}}
              <p class="continue">Continue Reading</p>
            </div>
          </div>
        </div>
        <div class="cap-rate">
          <div class="t">Capitalization Rate - {{ DetailData.cap_rate || 0 | floatFixFilter }}%</div>
          <div class="status">Rental Status: {{ DetailData.rent_status || ''}}  </div>
          <!-- Fully Rent until June 30th -->
          <div class="rate-list">
            <div v-for="item in DetailData.monthly_fee" :key="item.rid" class="row">
              <div class="l">{{item.rental_type || 'Gross Rent / year'}}</div>
              <div class="r">{{item.rental_value || '$5,488'}}</div>
            </div>
          </div>
        </div>
        <div class="neighborhood">
          <div class="t">Neighborhood</div>
          <div class="cont">
            <div id="googleMap" class="map"></div>
            <div class="info">
              <div v-for="(item, i) in [1,2,3]" :key="item" class="score">
                <div class="t">{{['Walk Score', 'Transit Score', 'Bike Score'][i]}}</div>
                <div class="num">{{Math.random()*100>>0}} / 100</div>
                <div class="txt">{{['Car Dependent', 'Minimal Transit', 'Somewhat Bikeable'][i]}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="school">
          <div class="t">Nearby Schools</div>
          <div class="criteria">
            <div class="all">All</div>
            <div class="elementary">Elementary</div>
            <div class="middle">Middle</div>
            <div class="high">High</div>
          </div>
          <table>
            <tr>
              <th>Rating</th>
              <th>School</th>
              <th>Type</th>
              <th>Grades</th>
              <th>Distance</th>
            </tr>
            <tr v-for="item in DetailData.nearby" :key="item.nid">
              <td>{{item.rating || '9'}}/10</td>
              <td>{{item.school || 'Wonderland Avenue Elementary School'}}</td>
              <td>{{item.type || 'Public'}}</td>
              <td>K-{{item.grades || '5'}}</td>
              <td>{{item.distance || '0.4'}}mi</td>
            </tr>
          </table>
        </div>
        <div class="similiar-listings">
          <div class="t">Similar Listings</div>
          <!--reusable components -->
          <div class="house-list">
            <!-- <div class="title">
              <div>Pasadena, CA Properties for Sale</div>
              <p>1,200 listings available on FrontRock</p>
            </div> -->
            <div v-for="(item, index) in housingList" :key="index+1" class="house">
              <div class="img"></div>
              <div class="info">
                <div class="t">
                  <div>Selway Apartments</div>
                  <p>390 Cliff Dr, Pasadena, CA 91107</p>
                </div>
                <div class="price">$1,200,000</div>
                <div class="type">Multi-family • Apartment</div>
                <div class="cap-rate">Cap Rate: 5.56%</div>
              </div>
              <div class="under">
                <div class="frk">10,000FRK/CA1</div>
                <div class="r">
                  <span class="chg">+0.05</span>
                  <span class="vol">1,000</span>
                </div>
              </div>
            </div>
          </div>
          <div class="more" @click="changeRouter(10)">View more</div>
        </div>
        <div class="features">
          <div class="t">Features</div>
          <div class="box">
            <div v-for="(item,i) in DetailData.features" :key="i" class="el-icon-check">
              <span>{{item}}</span>
            </div>
            <!-- ["Air Conditioning", "Laundry Room", "Window Covering", "Swimming Pool", "Gym", "Internet", "Central Heating", "Alarm"] -->
            <!-- <div>Laundry Room</div>
            <div>Window Covering</div>
            <div>Swimming Pool</div>
            <div>Gym</div>
            <div>Internet</div>
            <div>Central Heating</div>
            <div>Alarm</div> -->
          </div>
        </div>
        <div class="details">
          <div class="t">Details</div>
          <div class="box">
            <div class="cell" v-for="(item, i) in DetailData.features_details" :key="i">
              <span class="key">{{item.key}}:</span>
              <span class="val">{{item.val}}</span>
              <!-- <span class="val">{{['Single-Family','21-710292','2,500 sqft', 'Sunset Strip'][i%4]}}</span> -->
            </div>
          </div>
        </div>
        <div class="view-more">View more features (interior, exterior, property & lot, taxes)</div>
      </div>
    
    </div>
  </div>
</template>

<script>
import { houseInfo, capRateForm } from "@/api/listing"
import { initMap } from "@/api/google_map"
export default {
  name: 'property-detail',
  init() {},
  created() {
    this.getHouseInfo()
    this.getCapRateForm()
  },
  mounted() {
    console.log('property detail')
    // initMap('googleMap', [34.021298,-118.2668918])
  },
  components: {},
  data() {
    return {
        DetailData: {},
        Rates: {
          frk: ''
        },
        housingList: Array(3).fill({
          "id": "886",
          "total_price": 14277871,
          "house_addr": "Rhnnl Ijo Fie Gscbicwsm Yaajxpi Gmfyx",
          "images": {
            "filename": "pilbgxcfcm",
            "image": "http://dummyimage.com/120x90",
            "file_type": "hhawru",
            "fastdfs_image": "http://dummyimage.com/120x240"
          }
        })
    }
  },
  filters: {
    numberFormat(num) { //tb mixin
      let arr = [], snum = (num + '').split('').reverse()
      for(let i=0; i<snum.length; i++) {
        arr.unshift(snum[i])
        if(i%3 === 2) arr.unshift(',')
      }
      return arr.join('').replace(/^,|,$/, '')
    },
    floatFixFilter(num) {
      return num.toFixed(2)
    }
  },
  methods: {
    goback() {
      console.log(location)
      window.close()
    },
    getHouseInfo() {
      const mat = location.hash.match(/id=(\d{1,})/),
            _id = mat && mat[1] || ''
      houseInfo(_id)
        .then(data => {
          console.log(new Date(), data)
          this.DetailData = data.result
          this.elCarouselIndicators()
          this.renderer()
        })
        .catch(err => {
          this.$message.error((err && err.msg) || "catch houseInfo error!")
        })
    },
    getCapRateForm() {
      capRateForm()
        .then(data => {
          console.log('capRateForm:', data)
          const rate = 534543.5
          this.Rates = data.rates.frk
          this.Rates.frk = this.Rates.ca1 / rate
        })
        .catch(err => {
          this.$message.error((err && err.msg) || "catch capRateForm error!")
        })
    },
    elCarouselIndicators() {
      this.$nextTick(t => {
        const indicatorsImages = document.querySelectorAll('.el-carousel__indicators button')
        indicatorsImages.forEach((m, i) => {
          m.style.backgroundImage = `url(${this.DetailData.images[i].image})`
        })
      })
    },
    changeRouter(i) {
      console.log(Bus, i)
      if(i === 10) Bus.route.keywords = this.DetailData.house_addr
      Bus.$emit('topbar', i)
    },
    renderer() {
      // this.DetailData
      initMap('googleMap', [
        this.DetailData.location_lat || 34.111,
        this.DetailData.location_lng || -118.222
      ])
    }
  },
  beforeDestroy() {}
};
</script>

<style lang="scss">
.property-detail {
  // flex-wrap: wrap;
  background: #fff;
  .head{
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 85%;
    margin: 70px 0 50px 0;
    .l{
      width: 80%;
      display: flex;
      text-align: left;
      align-items: center;
      .goback{
        cursor: pointer;
        background: #F6F5F5;
        width: 80px;
        height: 80px;
        display: grid;
        place-items: center;
        border-radius: 5px;
        &:hover{
          filter: brightness(.95);
        }
        .el-icon-arrow-left{
          font-size: 35px;
          font-weight: bold;
          color:#070F4E;
        }
      }
      .title{
        color:#070F4E;
        font-family: Newsreader, serif;
        margin: 0 20px 0 30px;
        font-weight: bold;
        .t{
          font-size: 32px;
          // display: flex;
          // align-items: center;
          max-width: 620px;
          overflow: hidden;
          text-overflow: ellipsis;
          position: relative;
          padding-right: 40px;
          &:after{
            content: '♡';
            width:36px;
            height:36px;
            color:rgba(7, 15, 78, .4);
            transform: scaleX(1.2);
            // margin: -7px 0px 0 20px;
            font-size: 28px;
            font-weight: bolder;
            position: absolute;
            inset: -8px -8px 0 auto;
          }
        }
        .txt{
          margin: 12px 0 0 0;
          opacity: .6;
          font-weight:900;
          max-width: 435px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          // letter-spacing: 1px;
          .el-icon-location-outline{
  
          }
        }
      }
      .for-sale{
        font-family: "Krona One", monospace;
        font-size: 14px;
        padding: 10px 35px;
        background: #6271F1;
        color: #fff;
        border-radius: 50px;
        cursor: pointer;
        margin:-30px 0 0 0;
        letter-spacing: 1px;
        &:hover{
          filter: brightness(1.1);
        }
      }
    }
    .price{
      text-align: right;
      font-family: "Krona One", monospace;
      p{
        color:#6271F1;
        font-size: 28px;
        margin:0 0 20px 0;
      }
      span{
        opacity: .6;
        font-size: 14px;
      }
    }
  }

  .banner{
    width:85%;
    height: 600px;
    display: inline-block;
    .el-carousel{
      .el-carousel__container{
        .el-carousel__arrow{
          background: rgba(98, 113, 241, .6);
          width: 80px;
          height: 80px;
          border-radius: 20px;
          font-size: 40px;
          .el-carousel__arrow--left{
            
          }
          .el-carousel__arrow--right{
  
          }
        }
        .el-carousel__item {
          color: #475669;
          font-size: 18px;
          // opacity: 0.75;
          margin: 0;
          background-color: #fff;
          // background: url(../assets/pro_detail_banner1.jpeg);
          background-size: 100% auto;
          img{
            width: 100%;
            height: auto;
            // opacity: .3;
          }
        }
        // .el-carousel__item:nth-child(2n) {
        //   background-color: #99a9bf;
        //   filter: brightness(1.3) contrast(1.8);
        // }
        margin-bottom: 24px;
      }
      .el-carousel__indicators{
        white-space: nowrap;
        text-align: left;
        .el-carousel__indicator{
          padding: 0;
          button{
            background: url(../assets/pro_detail_banner1.jpeg);
            background-size: 100% 100%;
            // width: 48vmin;
            // height: 36vmin;
            width: 184px;
            height: 135px;
            margin-right: 25px;
          }
        }
      }
    }
  }

  .content{
    display: inline-flex;
    justify-content: space-between;
    width: 85%;
    margin: 64px 0;
    .left{
      width: 33%;
      /* min-width: 356px; */
      text-align: left;
      font-family: 'Krona One', monospace;
      .ca-frk{
        color: #fff;
        background: #070F4E;
        padding: 20px 25px 40px 25px;
        border-radius: 15px;
        .t{
          display: flex;
          align-items: center;
          &::before{
            content: '';
            width: 60px;
            height: 60px;
            background:url(../assets/land2_room.png) no-repeat;
            background-size: 100% auto;
            background-size: 100% auto;
            background-position: center center;
            display: inline-block;
            margin: 0 10px 0 0;
          }
        }
        .price{
          margin: 15px 0;
        }
        .chg-vol{
          font-size: 12px;
          color: #3BCEAB;
          margin: 0 20px 40px 0;
          .c{
          }
          .v{
            color: #fff;
          }
        }
        .balance{
          .tip{
            font-size: 13px;
            font-family: 'Newsreader', serif;
            color: rgba(246, 245, 245, .6);
          }
          .tr{
            margin: 5px 0 40px 0;
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            background: #fff;
            color: #070F4E;
            padding: 8px 25px 7px 25px;
            line-height: 23px;
            border-radius: 50px;
            .l{
            }
            input{
              outline: none;
              border: none;
              height: 20px;
              width: 85%;
              font-family: 'Krona One';
            }
            .r{
              font-size: 12px;
            }
          }
          .buy{
            // font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 
            // Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            font-family: Roboto, Arial, Helvetica, sans-serif;
            background: #5BCB93;
            padding: 12px 25px;
            border-radius: 50px;
            color: #fff;
            text-align: center;
            margin:40px 0 10px 0;
            cursor: pointer;
            &:hover{
              filter: brightness(1.1);
            }
          }
          .info{
            font-family: Roboto, Arial, Helvetica, sans-serif;
            font-size: 13px;
            color: #3BCEAB;
            text-align: center;
            display: inherit;
            cursor: pointer;
          }
        }
      }
        .forum {
          border-radius: 15px;
          background: #F6F5F5;
          margin:64px 0 0 0;
          padding: 15px 0;
          .thead {
            padding: 10px 25px;
            border-bottom: 1px solid #efefef;
            margin: 0 0 7px 0;
          }
          .topic {
            margin: 0 8px;
            font-size: 13px;
            background: #fff;
            padding: 15px;
            position: relative;
              .t {
              }
              .cont {
                font-size: 16px;
                color:#0A0F39;
                font-family: 'Newsreader', serif;
                margin: 10px 0 5px 0;
                line-height: 18px;
                width: 90%;
              }
              .operate {
                display: flex;
                color: rgba(10, 15, 57, .4);
                font-size: 12px;
                  .reply {
                        margin-right: 15px;
                  }
                  .share {
                  }
              }
              .r-widget {
                position: absolute;
                inset: 40px 5px 0 auto;
                color: rgba(10, 15, 57, .4);
                font-size: 12px;
              }
          }
          .replies {
            margin: 0 25px;
            .t {
              margin: 20px 0 10px -17px;
              font-size: 13px;
            }
            .reply {
              margin: 0 -17px;
              font-size: 13px;
              background: #fff;
              padding: 15px;
              position: relative;
                .rt {
                }
                .cont {
                  font-size: 14px;
                  font-family: 'Newsreader', serif;
                  margin: 10px 0 5px 0;
                  line-height: 18px;
                  width: 90%;
                  color:#272727;
                }
                .operate {
                  display: flex;
                  justify-content: flex-end;
                  color: rgba(10, 15, 57, .4);
                  font-size: 12px;
                  >div{
                    margin: 0 0 0 15px;
                  }
                    .reply-ico {
                    }
                    .share {
                    }
                    .widget {
                    }
                }
            }
            .comment-rich-box {
              margin: 0 0 0 -15px;
              textarea{
                width: 98%;
                border-color:rgba(180, 187, 198, 0.5);
                border-radius: 5px;
                padding: 10px;
                outline: none;
                &::placeholder{
                  color:#9E9EA8;
                }
              }
            }
          }
        }
    }

    .right{
      width: 62%;
      font-family: "Krona One", monospace;
      .overview{
        .brief{
          padding:25px;
          background: rgba(98, 113, 241, .05);
          border-radius: 20px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          text-align: left;
          >div{
            display: flex;
            flex-direction: column;
            line-height: 30px;
            &:before{
              color: rgba(7, 15, 78, .6);
            }
          }
          .type{
            &:before{
              content: 'Type';
            }
          }
          .areas{
            &:before{
              content: 'Areas';
            }
          }
          .bedroom{
            &:before{
              content: 'Bedroom';
            }
          }
          .bathroom{
            &:before{
              content: 'Bathroom';
            }
          }
        }
        .cont{
          margin: 60px 0 50px 0;
          padding: 0 0 50px 0;
          border-bottom: 1px solid #ececec;
          text-align: left;
          font-family: 'Newsreader', serif;
          .t{
            font-size: 36px;
            margin: 0 0 20px 0;
          }
          .txt{
            line-height: 22px;
            p{
              cursor: pointer;
              color: #6271F1;
              &:hover{
                text-decoration: underline;
              }
            }
          }
        }
      }
      .cap-rate{
        margin: 60px 0 50px 0;
        padding: 0 0 50px 0;
        border-bottom: 1px solid #ececec;
        text-align: left;
        font-family: 'Newsreader', serif;
        .t{
          font-size: 36px;
          margin: 0 0 20px 0;
        }
        .status{
          font-family: "Krona One", monospace;
          font-size: 12px;
        }
        .rate-list{
          font-family: "Krona One", monospace;
          margin: 20px 0;
          width:75%;
          .row{
            display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 40px;
            background: #f9f9fe;
            &:nth-child(even){
              background: rgba(98, 113, 241, 0.07);
            }
            >div{
              margin: 0 20px;
            }
            .l{
              font-family: 'Newsreader', serif;
            }
            .r{}
          }
        }
      }
      .neighborhood{
        margin: 60px 0 50px 0;
        padding: 0 0 50px 0;
        border-bottom: 1px solid #ececec;
        text-align: left;
        font-family: 'Newsreader', serif;
        .t{
          font-size: 36px;
          margin: 0 0 20px 0;
        }
        .cont{
          display: flex;
          // align-items: center;
          .map{
            background: url(../assets/map_s.jpeg) no-repeat;
            background-size: 100% auto;
            width: 530px;
            height: 335px;
          }
          .info{
            margin: 0 0 0 50px;
            .score{
              font-family: "Krona One", monospace;
              margin-bottom: 25px;
              .t{
                font-size: 14px;
                margin-bottom: 10px;
              }
              .num{
                font-size: 13px;
              }
              .txt{
                font-size: 16px;
                color: rgba(7, 15, 78, .6);
                font-family: 'Newsreader';
                margin: 15px 0 0 0;
              }
            }
          }
        }
      }
      .school{
        margin: 60px 0 50px 0;
        padding: 0 0 50px 0;
        border-bottom: 1px solid #ececec;
        text-align: left;
        font-family: 'Newsreader', serif;
        .t{
          font-size: 24px;
          margin: 0 0 20px 0;
        }
        .criteria{
          display: flex;
          font-family: "Krona One", monospace;
          margin: 24px 0;
          >div{
            margin: 0 10px 0 0;
            padding: 15px 20px;
            border-radius: 50px;
            cursor: pointer;
            &:hover{
              background: #ececec;
              color: #6271F1;
            }
            &:active{
              background: #6271F1;
              color: #fff;
            }

          }
          .all{
              background: #6271F1;
              color: #fff;
          }
          .elementary{}
          .middle{}
          .high{}
        }
        table{
          background: #f7f8fe;
          border-radius: 15px;
          line-height: 40px;
          padding: 15px;
          width:100%;
          th{
            font-weight: bold;
          }
          th, td{
            border-bottom:1px solid #e8ebfc;
          }
          td{
            color:rgba(10,15, 57, .8);
          }
        }
      }

      .similiar-listings{
        margin: 60px 0 50px 0;
        padding: 0 0 50px 0;
        border-bottom: 1px solid #ececec;
        text-align: left;
        font-family: 'Newsreader', serif;
        .t{
          font-size: 36px;
          margin: 0 0 20px 0;
        }
        .house-list{
          width: 75%;
          color:#070F4E;
          font-family: Newsreader, serif;
          text-align: left;
          overflow: auto;
          max-height: 800px;
          // .title{
          //   padding: 50px 0 0 30px;
          //   div{
          //     font-size: 24px;
          //     font-weight: bolder;
          //   }
          //   p{
          //     font-size: 18px;
          //     margin: 10px 0;
          //   }
          // }
          .house{
            margin: 30px 0px;
            display: flex;
            align-items: center;
            background: #F6F5F5;
            border-radius: 20px;
            position: relative;
            overflow: hidden;
            padding: 0 0 52px 0;
            .img{
              width: 47%;
              height: 180px;
              background: url(../assets/listing_house_list.jpeg) no-repeat;
              background-size: auto 100%;
              border-top-left-radius: 20px;
            }
            .info{
              font-family: "Krona One", monospace;
              font-size: 12px;
              margin:0 0 0 25px;
              .t{
                font-family: Newsreader, serif;
                font-size: 18px;
                div{
                  font-weight: bolder;
                }
                p{
                  font-size: 15px;
                  margin: 5px 0 20px 0;
                }
              }
              .price{
                font-size: 22px;
                margin: 0 0 15px 0;
              }
              .type{
                // font-size: 12px;
              }
              .cap-rate{
                margin:5px 0;
                padding:0;
                font-family: "Krona One", monospace;
              }
            }
            .under{
              font-family: "Krona One", monospace;
              display: flex;
              align-items: center;
              justify-content: space-between;
              color: #fff;
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
              background: #0A0F39;
              padding: 16px 25px;
              .frk{
                font-size: 16px;
              }
              .r{
                font-size: 14px;
                span{
                  margin: 0 10px;
                  &::before{
                    margin:0 5px;
                  }
                }
                .chg{
                  &:before{
                    content: 'CHG';
                    color: rgba(246, 245, 245, .6);
                  }
                  color:#3BCEAB;
                }
                .vol{
                  &:before{
                    content: 'VOL';
                    color: rgba(246, 245, 245, .6);
                  }
                }
              }
            }
          }
        }
        .more{
          font-family: "Krona One", monospace;
          border:2px solid #6271F1;
          border-radius: 50px;
          color:#6271F1;
          padding:15px 20px;
          text-align: center;
          width: 20%;
          margin: 20px 0 30px 0;
          cursor: pointer;
          &:hover{
            background: rgba(98, 113, 241, .1);
          }
        }
      }

      .features {
        margin: 60px 0 50px 0;
        padding: 0 0 0px 0;
        // border-bottom: 1px solid #ececec;
        text-align: left;
        font-family: 'Newsreader', serif;
        .t{
          font-size: 36px;
          margin: 0 0 20px 0;
        }
        .box {
          display: flex;
          // justify-content: space-around;
          flex-wrap: wrap;
          line-height: 40px;
          div{
            width:33%;
            display: flex;
            align-items: center;
            margin:0 0 20px 0;
            &.el-icon-check{
              &:before{
                color: #6271F1;
                // background: #fbb627;
                border-radius: 50%;
                border:2px solid #6271F1;
                width: 19px;
                height: 19px;
                font-size: 18px;
                font-weight: bolder;
                line-height: 21px;
                text-align: center;
                margin-right: 15px;
              }
            }
            span{
              font-family: 'Newsreader', serif;
              font-size: 18px;
            }
          }
        }
      }
      .details {
        margin: 60px 0 20px 0;
        // padding: 0 0 50px 0;
        // border-bottom: 1px solid #ececec;
        text-align: left;
        font-family: 'Newsreader', serif;
        .t{
          font-size: 24px;
          margin: 0 0 20px 0;
        }
        .box{
          display: flex;
          flex-wrap: wrap;
          line-height: 40px;
          .cell{
            width:33%;
            .key {
              opacity: .6;
            }
            .val {
              font-size: 18px;
            }
          }
        }
      }
      .view-more {
        cursor: pointer;
        color: #6271F1;
        text-align: left;
        font-family: 'Newsreader';
        &:hover{
          text-decoration: underline;
        }
      }

    }//endof right
    
  }
}

</style>


<style lang="scss" scoped type="auto-scss">
</style>